<template>
  <div class="detail" v-if="showdetail">
    <!-- 左右按钮 -->
    <van-sticky :offset-top="50">
      <div class="left" @click="getBack">
        <van-icon name="arrow-left" size="30" />
      </div>
      <div class="right" @click="share">
        <van-icon name="share-o" size="30" />
      </div>
    </van-sticky>
    <van-share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in goodsBanner" :key="item.id">
        <img :src="item.img_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="box1">
      <span> <van-icon name="passed" color="red" />30天无忧退货 </span>
      <span> <van-icon name="passed" color="red" />48小时快速退款 </span>
      <span> <van-icon name="passed" color="red" />满88元免邮费 </span>
    </div>
    <div class="info">
      <h3>{{ info.name }}</h3>
      <p>{{ info.goods_brief }}</p>
      <span>￥ {{ info.retail_price }}</span>
    </div>
    <div class="attribute">
      <h4>商品参数</h4>
      <ul>
        <li v-for="item in attributeList" :key="item.name">
          <span>{{ item.name }}</span>
          <span>{{ item.value }}</span>
        </li>
      </ul>
    </div>
    <div class="title">
      <span>产品详情</span>
      <div class="infos" v-html="infos"></div>
    </div>

    <van-popup
      v-model:show="showBottom"
      round
      position="bottom"
      :style="{ height: '50%' }"
    >
      <template #default>
        <div class="detailCart">
          <div class="top">
            <img :src="detailInfo.list_pic_url" alt="" />
            <div>
              <span>￥{{ detailInfo?.retail_price }}</span>
              <i
                >剩余 {{ detailInfo?.goods_number }}
                {{ detailInfo?.goods_unit }}</i
              >
              <em>请选择</em>
              <strong @click="showBottom = false">X</strong>
            </div>
          </div>
          <div class="content">
            <span>购买数量</span>
            <div>
              <button @click="subtract">-</button>
              <span>{{ number }}</span>
              <button @click="add">+</button>
            </div>
          </div>
        </div>
        <van-action-bar>
          <van-action-bar-button
            @click="addCar"
            type="warning"
            text="加入购物车"
          />
          <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
      </template>
    </van-popup>

    <van-action-bar>
      <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
      <van-action-bar-icon
        @click="goCar"
        :bot="true"
        :badge="num"
        icon="cart-o"
        text="购物车"
      />
      <van-action-bar-button
        @click="showCar"
        type="warning"
        text="加入购物车"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
  <div v-else>
    <van-empty description="此商品没有详情页数据,请关注其他商品" image="error">
      <van-button round type="primary" @click="getBack" class="bottom-button"
        >返回</van-button
      >
    </van-empty>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { goodsDetail } from "../server/detail";
import { getCarList, addCart } from "../server/car";
import { useCounterStore } from "../stores/counter";
import { storeToRefs } from "pinia";
import { showToast } from "vant";
import { showDialog } from "vant";
let counterStore = useCounterStore();
let showBottom = ref(false);
let { num } = storeToRefs(counterStore);
let route = useRoute();
let router = useRouter();
let flage = ref(false);
let goodsInfo = ref([]);
let infos = ref("");
let detailInfo = ref({});
let id = ref(0);
let number = ref(1);
let showShare = ref(false);
let options = [
  { name: "微信", icon: "wechat" },
  { name: "微博", icon: "weibo" },
  { name: "复制链接", icon: "link" },
  { name: "分享海报", icon: "poster" },
  { name: "二维码", icon: "qrcode" },
];
// 获取详情页数据
onMounted(() => {
  goodsDetail({ id: route.query.id })
    .then((res) => {
      console.log(res.data.info);
      id.value = res.data.productList[0].id;
      infos.value = res.data.info.goods_desc;
      detailInfo.value = res.data.info;
      if (res.data.gallery.length === 0) {
        flage.value = false;
      }
      flage.value = true;
      goodsInfo.value = res.data;
    })
    .catch(() => {
      flage.value = false;
    });
  getCarList().then((res) => {
    counterStore.setNum(res.data.cartTotal.goodsCount);
  });
});
// 获取轮播图数据
let goodsBanner = computed(() => goodsInfo.value.gallery);
let info = computed(() => goodsInfo.value.info);
let attributeList = computed(() => goodsInfo.value.attribute);
let showdetail = computed(() => {
  return goodsBanner?.value?.length && flage.value ? true : false;
});
function getBack() {
  router.go(-1);
}
function goCar() {
  router.push("/cart");
}
function showCar() {
  showBottom.value = true;
}
function add() {
  number.value++;
}
function subtract() {
  number.value--;
}
function addCar() {
  if (!localStorage.getItem("token")) {
    showDialog({
      message: "请先登录",
      theme: "round-button",
      width: "250px",
    })
      .then(() => {
        router.push("/mine");
      })
      .catch(() => {
        showBottom.value = false;
      });
    return;
  }
  addCart({
    goodsId: route.query.id,
    productId: id.value,
    number: number.value,
  }).then((res) => {
    showBottom.value = false;
    counterStore.setNum(res.data.cartTotal.goodsCount);
  });
}
function share() {
  showShare.value = true;
}
function onSelect(option) {
  showToast(option.name);
  showShare.value = false;
}
</script>

<style scoped>
.bottom-button {
  width: 12.5rem;
  margin-top: 6.25rem;
}
.detailCart > .top {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.detailCart > .top img {
  width: 6.25rem;
  height: 6.25rem;
  margin-right: 0.625rem;
  margin-left: 0.625rem;
}
.detailCart > .top div {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  justify-content: center;
  position: relative;
}
.detailCart > .top div i,
.detailCart > .top div em {
  font-style: normal;
  margin: 0.3125rem;
  color: #666;
  font-size: 0.875rem;
  line-height: 1;
}
strong {
  position: absolute;
  right: 1.25rem;
  top: 0;
  font-size: 1.625rem;
  font-weight: 500;
  color: #666;
}
.detailCart > .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem;
  box-sizing: border-box;
}
.detailCart > .content > div {
  display: flex;
}
.detailCart > .content > div button {
  width: 1.875rem;
  height: 1.875rem;
  border: none;
  font-size: 1.25rem;
  margin: 0 0.3125rem;
}
.detailCart > .content > div span {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  line-height: 1.75rem;
  text-align: center;
  background-color: #f6f6f6;
}
.detailCart > .top div > span {
  font-size: 20px;
  color: red;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 1.25rem;
  height: 23.4375rem;
  text-align: center;
}
.detail {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.van-swipe-item img {
  width: 100%;
}

:deep(.van-sticky) {
  position: absolute;
  top: 10px;
  width: 100%;
  height: 3.125rem;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.van-sticky > div {
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgb(0 0 0 /0.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.625rem;
}
.van-badge__wrapper {
  color: #fff;
}
.box1 {
  width: 100%;
  height: 1rem;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.3125rem;
}
.info {
  width: 100%;
  height: 3.5rem;
  display: flex;
  flex-direction: column;
  line-height: 1;
  align-items: center;
  justify-content: space-around;
  margin-top: 0.625rem;
}
.info > h3,
.info > p {
  margin: 0;
  font-size: 0.875rem;
}
.info > span {
  color: red;
}
.attribute {
  padding: 0 0.625rem;
  box-sizing: border-box;
  margin-bottom: 1.25rem;
}
.attribute > h4 {
  font-size: 1rem;
  line-height: 1;
  margin: 0;
}
.attribute > ul li {
  width: 100%;
  height: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f6f6f6;
  margin: 0.3125rem 0;
  border-radius: 0.625rem;
}
.attribute > ul li > span {
  margin: 0 0.3125rem;
  line-height: 1;
  text-align: right;
}
.attribute > ul li > span:first-child {
  width: 25%;
  overflow: hidden;
}
.attribute > ul li > span:last-child {
  text-align: left;
  width: 70%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.title {
  width: 100vw;
  height: 100vh;
  text-align: center;
}
.title > span {
  position: relative;
}
.title > span::after {
  content: "";
  display: block;
  width: 3.125rem;
  height: 0.1875rem;
  position: absolute;
  left: -125%;
  top: 50%;
  transform: translateY(-50%);
  background-color: gray;
}
.title > span::before {
  content: "";
  display: block;
  width: 3.125rem;
  height: 0.1875rem;
  position: absolute;
  left: 150%;
  top: 50%;
  transform: translateY(-50%);
  background-color: gray;
}
.title > div {
  width: 100%;
  overflow: hidden;
}
:deep(.title > div img) {
  width: 100%;
}
.detailCart {
  width: 100%;
  height: 40%;
  margin-top: 0.625rem;
}
</style>
